<template>
  <div>
    <van-nav-bar
      title="标题"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
    <!-- #是v-slot的缩写  -->
    <template #left>
      {{ cityName }}<van-icon color="black" name="arrow-down" />
    </template>
    <template #right>
      <van-icon size="23" color="black" name="search" />
    </template>
  </van-nav-bar>
  <!-- 影院列表 -->
   <div class="cinema" :style="{ height: height }">
    <ul>
      <li v-for="item in cinemaList" :key="item.cinemaId">
        <div>{{ item.name }}</div>
        <div class="address">{{ item.address }}</div>
      </li>
    </ul>
   </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import BetterScroll from 'better-scroll'

export default {
  data() {
    return {
      height: null
    }
  },
  computed: {
    ...mapState({
      cinemaList: state => state.cinema.cinemaList,
      cityName: state => state.city.cityName,
      cityId: state => state.city.cityId
    })
  },
  mounted() {
    this.height = document.documentElement.clientHeight - 96 + 'px'
    if(!this.cinemaList.length)  {
      this.getCinemaList(this.cityId)
    } else {
      this.$nextTick(() => {
        new BetterScroll('.cinema', {
          scrollbar: {
            fade: true
          }
        })
      })
    }
  },
  methods: {
    ...mapActions(['getCinemaList']),
    onClickRight() {
      this.$router.push('/cinema/search')
    },
    onClickLeft() {
      this.$router.push('/city')
    }
  }
}
</script>

<style lang="less" scoped>
  .cinema {
    height: 300px;
    overflow: hidden;
    position: relative;
    li {
      padding: 5px;
      .address {
        font-size: 12px;
        color: gray
      }
    }
  }
</style>